<template>
    <div class="productCategoryIndex">
        <add-edit-category-dialog :params="params" @close="close" @confirm="confirm" v-if="categoryDialogVisible" />
        <div class="butons">
            <el-button icon="el-icon-plus" @click="addFatherCategory">添加分类</el-button>
            <el-button icon="el-icon-plus" @click="addJdCategory">同步京东分类</el-button>
            <el-input style="flex:1;margin-left:300px" placeholder="请输入名称搜索" prefix-icon="el-icon-search" v-model="searchKey">
            </el-input>
        </div>
        <div class="productCategoryTable">
            <el-skeleton style="width:100%;margin-top:15px;padding: 0px 10px" v-if="!isShowTable" :rows="15" animated />
            <el-table ref="treeTable" v-if="isShowTable" highlight-current-row tooltip-effect="dark" :row-class-name="tableRowClassName" row-key="id" :data="productCategoryData" @current-change="handleCurrentChange" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                >
                <el-table-column prop="name" width="150" min-width="150px" label="分类名称">
                </el-table-column>
                <el-table-column prop="sort" width="150" label="三级分类分类ID">
                </el-table-column>
                <el-table-column prop="parent" width="110" label="是否子节点">
                    <template slot-scope="scope">
                        {{scope.row.parent?"是":"否" }}
                    </template>
                </el-table-column>
                <el-table-column prop="channel" width="110" label="是否频道节点">
                    <template slot-scope="scope">
                        {{scope.row.channel==1?"是":"否" }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="580" min-width="580">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="updateCategory(scope.$index, scope.row)">编辑分类</el-button>
                        <el-button size="mini" type="danger" @click="deleteCategory(scope.$index, scope.row)">删除分类</el-button>
                        <el-input size="mini" placeholder="请输入同步页码" v-model="page" style="width:100px;padding-right: 0px;margin-left: 10px" clearable>
                        </el-input>
                        <el-button style="margin-left:10px" size="mini" @click="asyncGoods(scope.$index, scope.row)">同步商品数据</el-button>
                        <el-button size="mini" @click="asyncTemplete(scope.$index, scope.row)">同步规格参数模板</el-button>
                        <el-button size="mini" @click="asyncBrnd(scope.$index, scope.row)">同步品牌</el-button>
                        <el-button size="mini" @click="addCategory(scope.$index, scope.row)">添加子类</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script lang="ts">
    import { Component, Vue, Watch } from 'vue-property-decorator'
    import { namespace } from 'vuex-class'
    import AdminApiActions from '@/components/api/admin-api-actions'
    import TreeUtils from '@/components/common/tree-utils';
    import _ from "lodash";
    import AddEditCategoryDialog from "./add-update-dialog/add-edit-category-dialog.vue";
    const goodsName = namespace("goods");
    @Component({
        components: {
            AddEditCategoryDialog
        },
    })
    export default class ProductCategory extends Vue {
        @goodsName.Mutation updateState;
        public searchKey: any = "";
        public total: any = 0;
        public scope: any = "";
        public orgProductCategoryData = new Array < any > ();
        //分类数据
        public categoryDialogVisible: boolean = false;
        public productCategoryData = new Array < any > ();
        public params: any = {};
        public currentRow: any = "";
        public asyncCurrentPage: any = 1;
        public isShowTable: boolean = false;
        public page = 1;
        async created() {
            let apiActions = new AdminApiActions(this);
            let result = await apiActions.getCategories({ name: "" });
            this.isShowTable = true;
            this.productCategoryData = result.data;
            this.orgProductCategoryData = result.data;
            this.$nextTick(() => {
                let categoryId: any = localStorage.getItem("categoryPageId");
                if (categoryId) {
                    this.cacheCheck(categoryId);
                } else {
                    TreeUtils.toggleRowExpansion(this.productCategoryData, false, this);
                }
            })
        }
        public async asyncGoods(index: any, row: any) {
            let apiActions = new AdminApiActions(this);
            if (!this.page) {
                this.$alert('<strong>同步商品页码不能为空</strong>', '提示', {
                    dangerouslyUseHTMLString: true
                });
                return;
            }
            let result = await apiActions.asyncJdCategoryGoods(row, this.page);
        }
        public async asyncTemplete(index: any, row: any) {
            let apiActions = new AdminApiActions(this);
            let result = await apiActions.asyncTemplete(row);
        }
        public async asyncBrnd(index: any, row: any) {
            let apiActions = new AdminApiActions(this);
            let result = await apiActions.asyncBrand(row);
        }
        public cacheCheck(categoryId: any) {
            let searchResult = new Array < any > ();
            TreeUtils.expendTreeData(this.productCategoryData, searchResult);
            let currentItem = searchResult.find(item => item.id == categoryId);
            let fatherItems = new Array < any > ();
            TreeUtils.addFather(searchResult, fatherItems, currentItem);
            for (let i = fatherItems.length - 1; i >= 0; i--) {
                if (this.$refs.treeTable) {
                    (this.$refs.treeTable as any).toggleRowExpansion(fatherItems[i], true);
                }
            }
        }
        @Watch("searchKey")
        public async searchByKey(searchText: any) {
            if (!searchText) {
                this.productCategoryData = _.cloneDeep(this.orgProductCategoryData);
                TreeUtils.toggleRowExpansion(this.productCategoryData, false, this);
            }
            if (searchText) {
                let orgData: Array < any >= this.productCategoryData;
                let treeData: Array < any >= TreeUtils.getSearchTree(searchText, orgData);
                this.productCategoryData = treeData;
                TreeUtils.toggleRowExpansion(this.productCategoryData, true, this);
            }
            let categoryId: any = localStorage.getItem("categoryId");
            if (categoryId) {
                this.cacheCheck(categoryId);
            }
        }
        //添加分类
        public addCategory(index, row) {
            this.params.type = "add";
            this.params.name = "";
            this.params.sort = "";
            this.params.id = "";
            this.params.channel = false;
            this.params.parent = false;
            this.params.parentId = row.id;
            this.categoryDialogVisible = true;
        }

        public addFatherCategory() {
            this.params.type = "add";
            this.params.name = "";
            this.params.sort = "";
            this.params.id = "";
            this.params.channel = false;
            this.params.parent = 0;
            let treeTable: any = this.$refs.treeTable;
            let selectData: Array < any >= treeTable.selection;
            this.params.parentId = this.currentRow.id;
            this.categoryDialogVisible = true;
        }
        public async addJdCategory() {
            let apiActions = new AdminApiActions(this);
            let result = await apiActions.addJdCategories()
        }
        //修改分类
        public updateCategory(index, item) {
            this.params.type = "update";
            this.params.name = item.name;
            this.params.sort = item.sort;
            this.params.id = item.id;
            this.params.parent = item.parent;
            this.params.channel = item.channel;
            this.params.parentId = "";
            this.categoryDialogVisible = true;
            this.$nextTick(() => {
                let categoryId: any = localStorage.getItem("categoryPageId");
                if (categoryId) {
                    this.cacheCheck(categoryId);
                } else {
                    TreeUtils.toggleRowExpansion(this.productCategoryData, false, this);
                }
            })
        }

        //删除分类
        public async deleteCategory(index, item) {
            let deleteArray = new Array < any > ();
            deleteArray.push(item);
            let allDatas = new Array < any > ();
            TreeUtils.expendTreeData(deleteArray, allDatas);
            let apiActions = new AdminApiActions(this);
            let ids: any = allDatas.map(item => {
                return item.id;
            });
            await apiActions.deleteCategories(ids);
            let result = await apiActions.getCategories({ name: "" })
            this.productCategoryData = result.data;
            this.orgProductCategoryData = result.data;
            this.$nextTick(() => {
                let categoryId: any = localStorage.getItem("categoryPageId");
                if (categoryId) {
                    this.cacheCheck(categoryId);
                } else {
                    TreeUtils.toggleRowExpansion(this.productCategoryData, false, this);
                }
            })
        }
        //关闭
        public close() {
            this.categoryDialogVisible = false;
        }
        //确认数据
        public async confirm() {
            this.categoryDialogVisible = false;
            let apiActions = new AdminApiActions(this);
            let result = await apiActions.getCategories({ name: "" })
            this.productCategoryData = result.data;
            this.orgProductCategoryData = result.data;
            this.$nextTick(() => {
                let categoryId: any = localStorage.getItem("categoryPageId");
                if (categoryId) {
                    this.cacheCheck(categoryId);
                } else {
                    TreeUtils.toggleRowExpansion(this.productCategoryData, false, this);
                }
            })
        }
        public handleCurrentChange(val) {
            localStorage.setItem("categoryPageId", val.id);
            this.currentRow = val;
        }
        //列名
        public tableRowClassName({ row, rowIndex }) {
            let categoryId: any = localStorage.getItem("categoryPageId");
            if (row.id === categoryId) {
                return 'current-row';
            }
            return '';
        }
    }
</script>
<style lang="less">
    .productCategoryIndex {
        width: 100%;
        height: 100%;

        .el-dialog {
            width: 40%;
            margin-top: 0px !important;

            .dialog-footer {
                display: flex;
                justify-content: center;
            }
        }

        .el-table__header {
            width: 120% !important;
        }

        .el-table__body {
            width: 120% !important;
        }

        .el-table__body-wrapper {
            overflow: auto;
            height: calc(100% - 50px);
        }

        .has-gutter .el-table-column--selection .cell {
            padding-left: 14px !important;
        }

        border:soild 1px red;

        .butons {
            display: flex;
            flex-direction: row;
        }

        .el-table .cell {
            display: flex;
        }

        .productCategoryTable {
            height: calc(100% - 55px);

            .el-table {
                height: calc(100% - 1px);
            }

            .el-pagination {
                margin-top: 12px;
            }
        }
    }
</style>